<template>
    <div>
        <v-head :headTitle="details.title">
            <!-- <router-link
        to="/mycoupon"
        slot="right"
      >
        兑换记录
      </router-link>-->
        </v-head>
        <div class="detail" ref="detail">
            <div class="details_page">
                <div class="content">
                    <!-- 轮播 -->
                    <van-swipe :autoplay="3000">
                        <van-swipe-item v-for="(image, index) in images" :key="index">
                            <img :src="imgBaseUrl + image" />
                        </van-swipe-item>
                    </van-swipe>
                    <!-- 产品信息 -->
                    <div class="product-wrapper">
                        <div>
                            <h1 class="title">{{ details.title }}</h1>
                            <p class="integral">
                                <!-- <span>积分</span> -->
                                <span>{{ details.subTitle }}</span>
                            </p>
                            <div class="info-wrapper">
                                <span class="info_price" v-if="details.price">
                                    ￥{{ details.price }}
                                    <del>￥{{ details.oPrice }}</del>
                                </span>
                                <span class="txt" v-if="details.limitNum">库存：{{ details.limitNum }}</span>
                            </div>
                        </div>
                        <!-- <van-stepper v-if='details.limitNum!=0' v-model="number" integer :min='details.buyLimit' :step="1" /> -->
                    </div>
                    <!-- 兑换有效期 -->
                    <div class="validity" v-if="details.deadline">
                        <span class="title">兑换有效期</span>
                        <span class="timer">{{ details.deadline }}</span>
                    </div>
                    <!-- 更多套餐 -->
                    <div v-if="moreTicket.length > 0" class="more_ticket">
                        <p class="title">更多套餐</p>
                        <div class="list_item" :key="index" v-for="(item, index) in moreTicket">
                            <p class="ticket_title">{{ item.title }}</p>
                            <div>
                                <p class="prices red_font">￥{{ item.price }}</p>
                                <span @click="changeTicket(item.id)">购买</span>
                            </div>
                        </div>
                    </div>
                    <!-- 商品详情 -->
                    <van-tabs class="details-wrapper" v-if="details.detail || details.notice" v-model="active" :line-width="150" color="#4ec3b0" sticky>
                        <van-tab v-if="details.detail" title="图文详情">
                            <div class="detail-wrapper" style="flex:1" v-html="details.detail"></div>
                        </van-tab>
                        <van-tab v-if="details.notice" title="使用须知">
                            <div class="detail-wrapper" style="flex:1" v-html="details.notice"></div>
                        </van-tab>
                    </van-tabs>
                </div>
            </div>
        </div>
        <div class="fixed-bar">
            <div class="total">
                总计：
                <span class="color-red">￥{{ details.price }}</span>
            </div>
            <!-- <button v-if="details.limitNum > 0" @click="toOrder">提交订单</button> -->
            <!-- <button class="disabled" v-else>敬请期待</button> -->
            <button class="disabled">活动结束</button>
        </div>

        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import vHead from '@/components/header/head';
import BScroll from 'better-scroll';
// import moment from 'moment';
import { Swipe, SwipeItem, Stepper, Tab, Tabs, Dialog } from 'vant';
import { imgBaseUrl } from '@/config/env';
export default {
    data() {
        return {
            active: 0,
            imgBaseUrl,
            images: [],
            number: 1,
            price: 100,
            details: [],
            id: '',
            coinNum: 0, // 用户积分
            btnDisabled: false,
            noStock: false,
            moreTicket: []
        };
    },
    mounted() {
        // http://localhost:81/#/points/detail/status1?states=fail
        if (this.$router.history.current.name === 'detail') {
            this.id = this.$route.query.id;
            document.getElementsByTagName('body')[0].style.overflow = 'hidden';
            this.show();
            this.getDetails(this.id);
        }
    },
    destroyed() {
        document.getElementsByTagName('body')[0].style.overflow = 'auto';
    },
    methods: {
        toOrder() {
            if (this.details.deadline) {
                Dialog.alert({
                    confirmButtonColor: '#28b46a',
                    title: '温馨提示',
                    message:
                        '本产品有效期：' +
                        this.details.deadline +
                        ' 请在有效期内使用，逾期作废！'
                }).then(() => {
                    this.$router.push({
                        path: '/points/detail/status',
                        query: { id: this.id }
                    });
                });
            } else {
                this.$router.push({
                    path: '/points/detail/status',
                    query: { id: this.id }
                });
            }
        },
        show() {
            this.$nextTick(() => {
                if (!this.scroll) {
                    this.scroll = new BScroll(this.$refs.detail, {
                        click: true,
                        preventDefaultException: {
                            tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|IMG|P|SPAN)$/
                        }
                    });
                } else {
                    this.scroll.refresh();
                }
            });
        },
        changeTicket(index) {
            this.$router.replace({
                path: '/points/detail',
                query: {
                    id: index
                }
            });
        },
        getDetails(id) {
            this.$http.post('/product/detail', { id: id }).then(res => {
                if (res) {
                    if (res.data.code === '0') {
                        const data = res.data.object;
                        this.details = res.data.object[0];
                        this.moreTicket = data.filter(
                            res => res.id.toString() !== this.id.toString()
                        );
                        this.images = this.details.pics.split(',');
                        this.price = data.coin;
                    }
                }
            });
        }
    },
    components: {
        vHead,
        'van-swipe': Swipe,
        'van-swipe-item': SwipeItem,
        'van-stepper': Stepper,
        'van-tab': Tab,
        'van-tabs': Tabs
    },
    watch: {
        $route() {
            if (this.$router.history.current.name === 'detail') {
                this.id = this.$route.query.id;
                this.show();
                this.getDetails(this.id);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.detail {
  position: fixed;
  left: 0;
  top: 88px;
  bottom: 88px;
  z-index: 99;
  width: 100%;
  background: #ebebeb;
  transform: translate3d(0, 0, 0);
}

.van-swipe {
  background-color: #fff;
  .van-swipe-item {
    img {
      width: 100%;
      max-height: 400px;
    }
  }
  .van-swipe__indicator--active {
    color: #fff;
  }
}

.product-wrapper {
  padding: 30px;
  background-color: #ffffff;
  position: relative;
  margin-bottom: 20px;
  .title {
    @include sc(30px, #050507);
    font-weight: 400;
  }
  .integral {
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
    letter-spacing: 0px;
    @include sc(44px, #f90619);
    span {
      font-weight: normal;
      letter-spacing: 0px;
      @include sc(28px, #5c5b60);
    }
    del {
      @include sc(24px, #999);
    }
  }
  .info-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    .txt {
      @include sc(24px, #7f7e81);
    }
    .info_price {
      color: red;
      font-size: 44px;
      del {
        color: #b7b6b7;
        font-size: 22px;
        margin-left: 10px;
      }
    }
  }
  p {
    margin-top: 10px;
  }
  .van-stepper {
    position: absolute;
    right: 30px;
    bottom: 30px;
  }
}
.validity {
  height: 88px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  font-size: 30px;
  margin-bottom: 20px;
  .timer {
    color: #7f7d7d;
  }
}

.more_ticket {
  background-color: #fff;
  margin-top: 30px;
  margin-bottom: 30px;
  .title {
    font-size: 28px;
    padding: 30px;
  }
  .list_item {
    padding: 30px;
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 0.027rem solid #ebebeb;
    .ticket_title {
      width: 5.5rem;
      color: #414141;
      font-size: 0.35rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .prices {
        font-size: 0.38rem;
        margin-right: 0.24rem;
      }
      span {
        width: 1.2rem;
        height: 0.6rem;
        background-color: #28b46a;
        border-radius: 0.08rem;
        color: #fff;
        font-size: 0.32rem;
        text-align: center;
        line-height: 0.6rem;
      }
    }
  }
}
.details-wrapper {
  background-color: #fff;
  .head {
    height: 85px;
    border-bottom: 2px solid #28b46a;
    @include sc(36px, #28b46a);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.fixed-bar {
  width: 100%;
  display: flex;
  z-index: 99;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 88px;
  background-color: #ffffff;
  .total {
    width: 60%;
    @include sc(32px, #1c1c1e);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  button {
    border: none;
    background-color: #28b46a;
    width: 40%;
    @include sc(32px, #fafafb);
    &.disabled {
      background-color: #b7b6b7;
      font-size: 30px;
    }
    p {
      font-size: 24px;
    }
  }
}
.detail-wrapper {
  padding: 20px;
  img {
    max-width: 100%;
  }
}
img {
  max-width: 100% !important;
}
.router-slid-enter-active,
.router-slid-leave-active {
  transition: all 0.4s;
}
.router-slid-enter,
.router-slid-leave-active {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
}
</style>
